<template>
  <div class="top">
    <van-icon name="arrow-left" @click="goindex" />
    <h2>壹点灵账号登录</h2>
    <p>请放心注册和登录，壹点灵充分保函户您的隐私</p>
  </div>

  <van-form @submit.prevent="">
    <van-cell-group inset>
      <van-field
        v-model="state.phone"
        placeholder="请输入手机号"
        :rules="[
          {
            required: true,
            pattern: /^(?:(?:\+|00)86)?1[3-9]\d{9}$/,
            message: '请填写11位手机号',
          },
        ]"
      >
        <template #label>
          <van-dropdown-menu>
            <van-dropdown-item v-model="state.value1" :options="option1" />
          </van-dropdown-menu>
        </template>
      </van-field>

      <van-field
        v-model="state.password"
        type="password"
        placeholder="请输入密码"
        :rules="[
          {
            required: true,
            pattern: /[a-z]{6}/,
            message: '请填写正确格式的密码',
          },
        ]"
      />
      <p class="forget">忘记密码?</p>
    </van-cell-group>
    <div style="margin: 16px">
      <van-button round block type="primary" native-type="submit" @click="post">
        登录
      </van-button>
    </div>
  </van-form>
  <div class="register">
    <span class="span1">还没账号?</span
    ><span class="span2" @click="toregiter">注册壹点灵</span>
  </div>
  <!-- 第三方登录 -->
  <div class="third">
    <span></span>
    <p>第三方登录</p>
    <span></span>
  </div>
  <div class="pic">
    <img src="../assets/img/imgdong/weixin.png" alt="" /><img
      src="../assets/img/imgdong/qq.png"
      alt=""
    />
  </div>
  <!-- <p class="bottom">登录即代表您同意《壹点灵用户使用协议》和《隐私协议》</p> -->
  <van-checkbox v-model="checked" class="bottom"
    >登录即代表您同意《壹点灵用户使用协议》和《隐私协议》</van-checkbox
  >
</template>

<script>
import cookie from "../utils/tool";
import { Notify } from "vant";
import { getlogin } from "../utils/api";
import { reactive, ref } from "vue";
import { useRouter } from "vue-router";
export default {
  data() {
    return {
      fieldValue: "",
    };
  },
  setup() {
    const state = reactive({
      phone: "",
      password: "",
      value1: 0,
    });
    const option1 = [
      { text: "中国", value: 0 },
      { text: "86", value: 1 },
      { text: "13", value: 2 },
    ];
    const checked = ref(true);
    const router = useRouter();
    const post = async () => {
      const res = await getlogin({
        username: state.phone,
        password: state.password,
      });
      if (res.status === 0) {
        Notify({ type: "success", message: res.msg });
        cookie.set("username", state.phone, 20);
        cookie.set("password", state.password, 20);
        cookie.set("token", res.token, 20);
        router.push("/home");
      } else {
        Notify({ type: "danger", message: res.msg });
      }
    };
    //跳转注册页面
    const toregiter = () => router.push("/register");
    const goindex = () => router.push("/home/index");
    return {
      state,
      option1,
      post,
      toregiter,
      goindex,
      checked,
    };
  },
};
</script>
<style lang="less" scoped>
.top {
  padding-left: 33.5px;
}
h2 {
  font-size: 20px;
  color: #282828;
  margin-top: 35px;
}
p {
  font-size: 11px;
  color: #c5c5c5;
  margin-top: 10px;
}
.register {
  display: flex;
  font-size: 12px;
  padding-left: 33.5px;
  .span1 {
    color: #ababab;
  }
  .span2 {
    color: #656565;
  }
}
.third {
  margin-top: 113px;
  display: flex;
  padding: 0 80px;
  color: #ababab;
  justify-content: space-between;
  align-items: center;
  p {
    width: 80px;
    height: 11.5px;
    font-size: 12px;
  }
  span {
    display: inline-block;
    height: 1px;
    width: 55px;
    background: #ababab;
  }
}
.pic {
  padding: 0 100px;
}
.bottom {
  padding-left: 30.5px;
  margin-top: 38px;
  font-size: 11px;
  color: #c5c5c5;
}
.van-field {
  align-items: center;
}
/deep/.van-dropdown-menu__item {
  justify-content: flex-start;
}
.forget {
  font-size: 12px;
  margin-left: 15px;
  color: #656565;
}
/deep/.van-dropdown-menu__title::after {
  right: -15px;
}
</style>
